3. DOM
The Document Object Model is an increasingly common part
of mobile development.
3.1. Versions
Two main DOM versions are available for mobile browsers:
DOM Level 1 HTML
DOM Level 2 HTML & Core
DOM Level 1 has been deprecated as a standard, but it still
works in desktop and some mobile browsers. I remember using it in the
’90s, before it was replaced by DOM Level
2.
DOM Level 1 allows a series of array collections as objects in
the document for accessing all the
elements in the document. The collections are:
images
applets
links
forms
anchors
It also defines the document.getElementById and document.getElementsByName methods. In DOM
Level 1, it is common to access a form’s input values using the syntax
document.forms[0].input_name.value, supposing
a unique form.
DOM Level 2 added some new methods, and it is the most commonly
used version today for mobile browsers. DOM Level 3 added events,
validation, and XPath support, but it’s not compatible with most
mobile browsers.
3.2. Browsing
Table 14 shows
compatibility for DOM browsing methods in the different mobile
browsers.
Table 14. DOM support compatibility table
Browser/
platform | DOM HTML
collecs. | getElementById | getElementsByTagName | childNodes |
---|
Safari | Yes | Yes | Yes | Yes |
Android
browser | Yes | Yes | Yes | Yes |
Symbian/
S60 | Yes | Yes | Yes | Yes |
Nokia Series 40 before
6th edition | No | Yes | No | No |
Nokia Series 40 after
6th edition | No | Yes | Yes | Yes |
webOS | Yes | Yes | Yes | Yes |
BlackBerry | No | Yes | No before
4.6 | Yes |
NetFront | No | Yes | Yes | Yes |
Internet
Explorer | Partial | Yes | Yes | Yes |
Motorola Internet
Browser | No | Yes | No | Yes |
Opera
Mobile | Yes | Yes | Yes | Yes |
Opera
Mini | Yes | Yes | Yes | Yes |
3.3. Query selectors
Query selectors are a way to use CSS selectors to
retrieve an element result list from the DOM. This mechanism is very
popular when using the jQuery JavaScript library, and it is included
natively as an extension in some WebKit-based browsers and Firefox 3.5
for desktop. At the time of this writing query selectors are covered
in a W3C draft known as Selectors API Level 1.
A query is made using document.querySelector(selector) for unique results, or document.querySelectorAll(selector) for many possible return values. For
example:
var items = document.querySelectorAll("ul.menu > li");
var option = document.querySelector('#form1 input[type="radio"]:checked');
Many browsers have moved ahead to support query selectors, as
shown in Table 15.
Table 15. CSS-style query selector compatibility table
Browser/platform | Query selector
support |
---|
Safari | Yes |
Android
browser | Yes |
Symbian/S60 | No |
Nokia Series
40 | No |
webOS | Yes |
BlackBerry | No |
NetFront | No |
Internet
Explorer | No |
Motorola Internet
Browser | No |
Opera
Mobile | Yes |
Opera
Mini | Yes |
3.4. Changing properties
DOM for HTML defines an object representing each HTML
tag with properties for each HTML attribute. Many browsers support
this, as you’ll see in Table 8-16. For example, we
can create an image gallery album by changing the src property of an img tag every 2 seconds. When you change a
property that defines a change in a resource, the browser needs to get
the new resource at that time. The following code demonstrates:
<body>
<script type="text/javascript">
var timer = setInterval(changeImage, 2000);
var currentImage = 0;
function changeImage() {
// We have 5 images, from 0 to 4
currentImage = (currentImage + 1) % 5;
document.getElementById("album").src = currentImage + ".png";
}
</script>
<img src="1.png" id="album" width="100" height="100" />
</body>
Note:
If the mobile browser supports CSS Sprites, we can make the same album by changing
the style.backgroundPosition
property to move the window to a different part of the image.
Table 16
shows which browsers support changing properties dynamically.
Table 16. Changing properties dynamically compatibility table
Browser/platform | Support for changing
properties |
---|
Safari | Yes |
Android
browser | Yes |
Symbian/S60 | Yes |
Nokia Series
40 | No before
6th edition |
webOS | Yes |
BlackBerry | No before
4.6 |
NetFront | Yes |
Internet
Explorer | Partial |
Motorola Internet
Browser | Yes |
Opera
Mobile | Yes |
Opera
Mini | Yes (on the
server) |
3.5. Changing content
The most common usage of Dynamic HTML is to change the content
of an element using the innerHTML property
(or the simpler innerText). For
example, you may want to use it to replace content in or add content
to an element. Table 17 shows which
browsers currently support this property.
Table 17. innerHTML property compatibility table
Browser/platform | Support for
innerHTML |
---|
Safari | Yes |
Android
browser | Yes |
Symbian/S60 | Yes |
Nokia Series
40 | No before
6th edition |
webOS | Yes |
BlackBerry | No before
4.6 |
NetFront | Yes |
Internet
Explorer | Yes |
Motorola Internet
Browser | Yes |
Opera
Mobile | Yes |
Opera
Mini | Yes (on the
server) |
3.6. Preloading images
It is common in Dynamic HTML documents to preload images
in memory if we are going to use them later in the same document
(e.g., in the previous image gallery). This is typically done using
code like the following:
var image = new Image(100,25);
image.src = "image_url";
Then, when we use the same src in another image, the resource should
already be present in the cache. Table 18
shows which devices support preloading.
Table 18. Preloading images compatibility table
Browser/platform | Support for
preloading images |
---|
Safari | Yes |
Android
browser | Yes |
Symbian/S60 | Yes |
Nokia Series
40 | No before
6th edition |
webOS | Yes |
BlackBerry | No before
4.6 |
NetFront | Yes |
Internet
Explorer | Yes |
Motorola Internet
Browser | No |
Opera
Mobile | Yes |
Opera
Mini | Yes |
3.7. Adding and removing elements
The alternative to using innerHTML to insert elements inside another
element is to use DOM methods to add objects as children. The next
script will remove all of a list item’s children and replace them with
a link:
var items = document.getElementsById("li");
for (int i=0; i<items.length; i++) {
for (int j=0; j<items[i].childNodes; j++) {
items[i].removeChild(items[i].childNodes[j]);
}
var a = document.createElement("a");
a.href = "go.html";
a.innerHTML = "Item " + i;
items[i].appendChild(a);
}
Table 19 shows how this
works in mobile browsers.
Table 19. Adding and removing elements in DOM compatibility
table
Browser/platform | Support for
appendChild and removeChild |
---|
Safari | Yes |
Android
browser | Yes |
Symbian/S60 | Yes |
Nokia Series
40 | No before
6th edition |
webOS | Yes |
BlackBerry | No before
4.6 |
NetFront | Yes |
Internet
Explorer | Yes |
Motorola Internet
Browser | No |
Opera
Mobile | Yes |
Opera
Mini | Yes |
Warning:
For the best mobile performance, use innerHTML instead of using DOM methods for
adding, moving, and removing elements.